/**
 * Created by chencheng on 17-8-31.
 */

import { Component } from 'react';

import { MainHeader, MainContent } from 'templates/MainLayout/MainLayout';
import { EnumModalType } from 'constants/EnumType';
import {
    Table, Button, Input, Icon, Modal, Form,
} from 'antd';

import T from 'utils/T';

const _ = T.lodash;
import './index.scss';


export default class HtmlComponents extends Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.opactiyNum = ['1','0.8','0.6','0.4','0.2','0.1'];
    }

    componentDidMount() {
        let $svgListBox = $(this.svgListBox);

    }

    //画小球点
    drawPoints = (key=1) =>{
        return this.opactiyNum.map((item,index) => {
            return <g key={key + index} id={'ant4_' + key + '_' + index}><circle fill="#B3DFFF" fillOpacity={item} cx="0" cy="0" r="3" /></g>
        })
    };


    render() {
        var color = ['#5b61ff', '#3891ff','#4dbaff','#00d1ff', '#dce986','#facf14','#f4a523','#f48023', '#73edff','#1af0e9','#4ef8cd','#72ed9d','#b2e986', '#ee8c71','#fe5b57','#ff4787'];
        return (
            <div>
                <MainHeader title="普通js/html组件" />

                <MainContent style={{ background: 'rgba(0,0,0,0.3)'}}>

                    <div className="warnInfoBoxList">
                        <ul className="contentList">
                            <li>
                                <div>
                                    <div className="num"><span>12</span>%</div>
                                    <p>自然灾害</p>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <div className="num"><span>12</span>%</div>
                                    <p>自然灾害</p>
                                </div>

                            </li>
                            <li>
                                <div>
                                    <div className="num"><span>12</span>%</div>
                                    <p>自然灾害</p>
                                </div>

                            </li>
                            <li>
                                <div>
                                    <div className="num"><span>12</span>%</div>
                                    <p>自然灾害</p>
                                </div>

                            </li>
                        </ul>
                        <div className="svgBox">
                            <svg>


                                <animateMotion xlinkHref="#ant4_1_0" dur="5s" begin="0.02s" path="M4 4 L196 4 L198 122 L4 122 L4 4" fill="remove" rotate="auto" repeatCount="indefinite"/>
                                <animateMotion xlinkHref="#ant4_1_1" dur="5s" begin="0.04s" path="M4 4 L196 4 L198 122 L4 122 L4 4" fill="remove" rotate="auto" repeatCount="indefinite"/>
                                <animateMotion xlinkHref="#ant4_1_2" dur="5s" begin="0.06s" path="M4 4 L196 4 L198 122 L4 122 L4 4" fill="remove" rotate="auto" repeatCount="indefinite"/>
                                <animateMotion xlinkHref="#ant4_1_3" dur="5s" begin="0.08s" path="M4 4 L196 4 L198 122 L4 122 L4 4" fill="remove" rotate="auto" repeatCount="indefinite"/>
                                <animateMotion xlinkHref="#ant4_1_4" dur="5s" begin="0.10s" path="M4 4 L196 4 L198 122 L4 122 L4 4" fill="remove" rotate="auto" repeatCount="indefinite"/>
                                <animateMotion xlinkHref="#ant4_1_5" dur="5s" begin="0.12s" path="M4 4 L196 4 L198 122 L4 122 L4 4" fill="remove" rotate="auto" repeatCount="indefinite"/>3
                                <animateMotion xlinkHref="#ant4_2_0" dur="5s" begin="0.02s" path="M198 122 L4 122 L4 4 L196 4 L198 122" fill="remove" rotate="auto" repeatCount="indefinite"/>
                                <animateMotion xlinkHref="#ant4_2_1" dur="5s" begin="0.04s" path="M198 122 L4 122 L4 4 L196 4 L198 122" fill="remove" rotate="auto" repeatCount="indefinite"/>
                                <animateMotion xlinkHref="#ant4_2_2" dur="5s" begin="0.06s" path="M198 122 L4 122 L4 4 L196 4 L198 122" fill="remove" rotate="auto" repeatCount="indefinite"/>
                                <animateMotion xlinkHref="#ant4_2_3" dur="5s" begin="0.08s" path="M198 122 L4 122 L4 4 L196 4 L198 122" fill="remove" rotate="auto" repeatCount="indefinite"/>
                                <animateMotion xlinkHref="#ant4_2_4" dur="5s" begin="0.10s" path="M198 122 L4 122 L4 4 L196 4 L198 122" fill="remove" rotate="auto" repeatCount="indefinite"/>
                                <animateMotion xlinkHref="#ant4_2_5" dur="5s" begin="0.12s" path="M198 122 L4 122 L4 4 L196 4 L198 122" fill="remove" rotate="auto" repeatCount="indefinite"/>
                                {this.drawPoints(1)}
                                {this.drawPoints(2)}
                            </svg>
                        </div>
                    </div>

                </MainContent>
            </div>
        );
    }
}

